<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
  <script src="./vue.js"></script>
</head>
<body>
  <div id="app">
    <form>
      <table class="table table-bordered table-hover table-striped">
        <thead>
          <th>添加姓名</th>
        </thead>
        <tbody>
          <td>
            <span>姓名</span>
            <input type="text" placeholder="请输入姓名" v-model="brand">
            <button type="submit" @click="add">添加</button>
          </td>
        </tbody>
      </table>
    </form>
    <hr>
    <table class="table table-hover table-bordered table-striped">
      <thead>
        <th>索引</th>
        <th>id</th>
        <th>姓名</th>
        <th>状态</th>
        <th>操作</th>
        <th>时间</th>
      </thead>
      <tbody>
       <tr v-for="(item,index) in list" >
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.uname}}</td>
        <td>
          <input type="checkbox" v-model="item.status" :id="item.id">
          <label v-if="item.status" :for="item.id">已启用</label>
          <label v-else :for="item.id">已禁用</label>
          <input type="text" v-model="item.status">
        </td>
        <td>
          <a href="#" @click="remove(item.id)" style="text-decoration: none;">{{item.cz}}</a>
        </td>
        <td>{{item.time | dateFormat}}</td>
       </tr>
      </tbody>
    </table>
  </div>
  <script src="./day.js"></script>
  <script>
    Vue.filter('dateFormat', function(time) {
      let dtStr = dayjs(time).format('YYYY-MM-DD hh:mm:ss')
      return dtStr
    })
    const vm = new Vue({
      el:'#app',
      data:{
        brand:'',
        nextId:6,
        list:[
          {id:1,uname:'张三',status:true,cz:'删除',time:new Date()},
          {id:2,uname:'李四',status:false,cz:'删除',time:new Date()},
          {id:3,uname:'王五',status:true,cz:'删除',time:new Date()},
          {id:4,uname:'老六',status:false,cz:'删除',time:new Date()},
          {id:5,uname:'赵七',status:true,cz:'删除',time:new Date()},
        ]
      },
      methods:{
        remove(id) {
          console.log(id);
          this.list = this.list.filter(item => item.id != id)
        },
        add() {
          if (this.brand == '') return alert('姓名不能为空');
          console.log(this.brand);
          
          const obj = {
            id:this.nextId,
            uname:this.brand,
            status:true,
            cz:'删除',
            time:new Date()
          }
          this.list.push(obj);
          this.brand = '';
          this.nextId++
        }
      }
    })
  </script>
</body>
</html>